<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改头像</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/blog_login.css">

  <!--     加载 static底下的 favicon.ico 图标-->
  <link rel="shortcut icon" href="/favicon.ico"/>
  <link rel="bookmark" href="/favicon.ico"/>

</head>
<body>
<!-- 导航栏 -->

<div class="nav">

  <!-- <img src="image/img1.jpg" alt="加载失败" > -->
  <img src="image/img1.jpg" alt="图片加载失败">
  <span class="title">筱的博客</span>

  <!-- 此标签用于占位 分隔 -->
  <div class="spacer"></div>

  <a href="blog_list.html">个人主页</a>

</div>

<!-- 登录页面容器 整个页面框-->
<!-- 通过此页面框 在其内部设计登录框 可以通过弹性布局让其水平垂直居中 -->
<!-- 如果直接弄登录框 那就得设计外边距等使其水平垂直对齐 -->
<div class="login-container">

  <!-- 登录指示 样式 页面里的登录框-->
  <div class="dialog" style="height: 300px">
    <h2>修改头像</h2>
      <div class="card">
          <img src="" alt="">
      </div>

          <div>
<!--             文件上传  指定上传文件类型-->
              <input id="fileInput" type="file" accept="image/png,image/jpeg,image/jpg,image/webp,image/tif"  style="margin-left: 200px; display: block;width: 200px"  />
          </div>



      <!-- 这里存放错误信息 -->
    <div class="error">

    </div>


    <div class="row">
      <!-- 换成submit提交标签按钮 -->
      <!-- <a id="submit" href ="blog_list.html">登录</a> -->
      <button id="submit">修改头像</button>
    </div>





  </div>

</div>

<!--<script src="../../../../../captcha/src/main/resources/static/jquery.js"></script>-->
<script src="js/jquery.js"></script>
<script>
  let error = document.querySelector('.error');
  let button = document.querySelector('#submit');
  error.innerHTML = '';


  button.onclick = function () {
    let file;
    file=document.querySelector('#fileInput');

      button.className="forbid";
      error.innerHTML ='请稍等, 正在修改头像中...';
      if(file.files[0]==null){
        error.innerHTML='请选择要上传的头像!';
        button.className="allow";
        return;
      }
      let formData=new FormData(); // 用来存储文件对象传给后端
      formData.append("profile",file.files[0]); // key文件对象的名字 value文件对象 将文件放入此对象
      $.ajax({
        url: 'user/modifyprofile',
        type: 'post',
        data: formData, // 将此对象传给后端  后端会根据里面的key 读取其里面的文件对象
        processData: false,//阻止jquery对formData数据进行加工处理
        contentType: false,//阻止jquery修改formData数据的类型
        success: function (body) {
          if (body != null && body.code == 200) {
            error.innerHTML='头像修改成功!';
            let profile=document.querySelector('.card img');
            profile.src=body.data;

          } else {
            error.innerHTML = body.msg;
          }
          button.className="allow";
        }
      });
    }

  let getLogin = function () {
    // 获取 个人信息
    $.ajax({
      type: 'get',
      url: '/user/showuser',
      success: function (body) {
        // 状态码为200 且有数据 即获取到了个人信息
        if (body != null && body.code == 200 && body.data != null) {
          let profile=document.querySelector('.card img');
          profile.src=body.data.photo;

        } else {
          alert("操作异常:" + body.msg);
          location.assign('blog_login.html');
        }
      }
    });

  };
  getLogin();

</script>
</body>
</html>